<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>在线课程学习网站</title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="robots" content="all,follow" />
  <link rel="stylesheet" href="vendor/swiper/swiper-bundle.min.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:300,400&amp;display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface&amp;display=swap" />
  <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet" />
  <link rel="stylesheet" href="css/custom.css" />
</head>

<body>
  <!-- 网页头部 -->
  <header class="header">
    <!-- 顶部 -->
    <div class="nav_1">
      <ul>
        <li><a href="./a index.html">HTML</a></li>
        <li><a href="./css.html">CSS</a></li>
        <li><a href="./js.html">JS</a></li>
        <li><a href="./MESSAGE.html">MESSAGE</a></li>
        <li><a href="./login.html">login</a></li>
        <li><a href="https://gitee.com/lover_3/final.git">git</a></li>
        <div class="nav_box1"></div>
      </ul>
    </div>
    <!-- 导航条 1 -->
    <div class="banner">
      <div id="slide3d" class="slide-carousel slide-3d">
        <ul class="item-list clearfix">
          <li class="item0">
            <div class="item-content">
              <a href="javascript:void(0);">
                <img class="cover-img"
                  src="./img/1.png" alt>
              </a>
            </div>
          </li>
          <li class="item1">
            <div class="item-content">
              <a href="javascript:void(0);">
                <img class="cover-img"
                  src="./img/2.png" alt>
              </a>
            </div>
          </li>
          <li class="item2">
            <div class="item-content">
              <a href="javascript:void(0);">
                <img class="cover-img"
                  src="./img/3.png" alt>
              </a>
            </div>
          </li>
          <li class="item3">
            <div class="item-content">
              <a href="javascript:void(0);">
                <img class="cover-img"
                  src="./img/4.png" alt>
              </a>
            </div>
          </li>
          <li class="item4">
            <div class="item-content">
              <a href="javascript:void(0);">
                <img class="cover-img"
                  src="./img/5.png" alt>
              </a>
            </div>
          </li>
          <li class="item5">
            <div class="item-content">
              <a href="javascript:void(0);">
                <img class="cover-img"
                  src="./img/6.png" alt>
              </a>
            </div>
          </li>
    <!-- 导航条 2 -->
  </header>
  <!-- 课程卡片 -->
  <section class="pt-5">
    <div class="container">
      <h1>模拟在线课程学习网站</h1>
      <p class="mb-0">超文本标签语言（英文全称：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标签语言。</p>
    </div>
    <div class="swiper destinations-slider swiper-padding">
      <div class="swiper-wrapper">
        <div class="swiper-slide h-auto">
          <a class="destination d-flex align-items-end bg-center bg-cover" href="post.html"
            style="background: url(img/898989.jpg)">
            <div class="destination-inner w-100 text-center text-white index-forward has-transition">
              <p class="small text-uppercase mb-0">HTML 元素语法</p>
              <h2 class="h3 mb-4">HTML 元素</h2>
              <div class="btn btn-primary w-100 destination-btn text-white">
                了解更多
              </div>
            </div>
          </a>
        </div>
        <div class="swiper-slide h-auto">
          <a class="destination d-flex align-items-end bg-center bg-cover" href="post.html"
            style="background: url(img/898989.jpg)">
            <div class="destination-inner w-100 text-center text-white index-forward has-transition">
              <p class="small text-uppercase mb-0">HTML 属性常用引用属性值</p>
              <h2 class="h3 mb-4">HTML 属性</h2>
              <div class="btn btn-primary w-100 destination-btn text-white">
                了解更多
              </div>
            </div>
          </a>
        </div>
        <div class="swiper-slide h-auto">
          <a class="destination d-flex align-items-end bg-center bg-cover" href="post.html"
            style="background: url(img/898989.jpg)">
            <div class="destination-inner w-100 text-center text-white index-forward has-transition">
              <p class="small text-uppercase mb-0">标题来快速判断您的网页内容和主题</p>
              <h2 class="h3 mb-4">HTML 标题</h2>
              <div class="btn btn-primary w-100 destination-btn text-white">
                了解更多
              </div>
            </div>
          </a>
        </div>
        <div class="swiper-slide h-auto">
          <a class="destination d-flex align-items-end bg-center bg-cover" href="post.html"
            style="background: url(img/898989.jpg)">
            <div class="destination-inner w-100 text-center text-white index-forward has-transition">
              <p class="small text-uppercase mb-0">段落是通过 <p>  标签定义的。</p>
              <h2 class="h3 mb-4">HTML 段落</h2>
              <div class="btn btn-primary w-100 destination-btn text-white">
                了解更多
              </div>
            </div>
          </a>
        </div>
        <div class="swiper-slide h-auto">
          <a class="destination d-flex align-items-end bg-center bg-cover" href="post.html"
            style="background: url(img/898989.jpg)">
            <div class="destination-inner w-100 text-center text-white index-forward has-transition">
              <p class="small text-uppercase mb-0">HTML 文本格式化标签</p>
              <h2 class="h3 mb-4">HTML 文本格式化</h2>
              <div class="btn btn-primary w-100 destination-btn text-white">
                了解更多
              </div>
            </div>
          </a>
        </div>
        <div class="swiper-slide h-auto">
          <a class="destination d-flex align-items-end bg-center bg-cover" href="post.html"
            style="background: url(img/898989.jpg)">
            <div class="destination-inner w-100 text-center text-white index-forward has-transition">
              <p class="small text-uppercase mb-0">HTML 使用超级链接与网络上的另一个文档相连。</p>
              <h2 class="h3 mb-4">HTML 链接</h2>
              <div class="btn btn-primary w-100 destination-btn text-white">
                了解更多
              </div>
            </div>
          </a>
        </div>
        <div class="swiper-slide h-auto">
          <a class="destination d-flex align-items-end bg-center bg-cover" href="post.html"
            style="background: url(img/898989.jpg)">
            <div class="destination-inner w-100 text-center text-white index-forward has-transition">
              <p class="small text-uppercase mb-0">实现页内或跨页跳转</p>
              <h2 class="h3 mb-4">HTML 锚点</h2>
              <div class="btn btn-primary w-100 destination-btn text-white">
                了解更多
              </div>
            </div>
          </a>
        </div>
        <div class="swiper-slide h-auto">
          <a class="destination d-flex align-items-end bg-center bg-cover" href="post.html"
            style="background: url(img/898989.jpg)">
            <div class="destination-inner w-100 text-center text-white index-forward has-transition">
              <p class="small text-uppercase mb-0">html空格符号代码</p>
              <h2 class="h3 mb-4">html 空格符</h2>
              <div class="btn btn-primary w-100 destination-btn text-white">
                了解更多
              </div>
            </div>
          </a>
        </div>
        <div class="swiper-slide h-auto">
          <a class="destination d-flex align-items-end bg-center bg-cover" href="post.html"
            style="background: url(img/898989.jpg)">
            <div class="destination-inner w-100 text-center text-white index-forward has-transition">
              <p class="small text-uppercase mb-0">览器在何处可以找到样式表</p>
              <h2 class="h3 mb-4">HTML 头部元素</h2>
              <div class="btn btn-primary w-100 destination-btn text-white">
                了解更多
              </div>
            </div>
          </a>
        </div>
        <div class="swiper-slide h-auto">
          <a class="destination d-flex align-items-end bg-center bg-cover" href="post.html"
            style="background: url(img/898989.jpg)">
            <div class="destination-inner w-100 text-center text-white index-forward has-transition">
              <p class="small text-uppercase mb-0">html页面中可以插入图像</p>
              <h2 class="h3 mb-4">HTML 图像</h2>
              <div class="btn btn-primary w-100 destination-btn text-white">
                了解更多
              </div>
            </div>
          </a>
        </div>
        <div class="swiper-slide h-auto">
          <a class="destination d-flex align-items-end bg-center bg-cover" href="post.html"
            style="background: url(img/898989.jpg)">
            <div class="destination-inner w-100 text-center text-white index-forward has-transition">
              <p class="small text-uppercase mb-0">表格其实就是很多的小单元格</p>
              <h2 class="h3 mb-4">HTML 表格</h2>
              <div class="btn btn-primary w-100 destination-btn text-white">
                了解更多
              </div>
            </div>
          </a>
        </div>
      </div>
      <div class="swiper-button-prev swiper-custom-nav text-uppercase letter-spacing-0">
        <svg class="svg-icon svg-icon me-1">
          <use xlink:href="#arrow-left-1"></use>
        </svg><span class="text-sm">前一个</span>
      </div>
      <div class="swiper-button-next swiper-custom-nav text-uppercase letter-spacing-0">
        <span class="text-sm">后一个</span>
        <svg class="svg-icon svg-icon ms-1">
          <use xlink:href="#arrow-right-1"></use>
        </svg>
      </div>
    </div>
  </section>
  <!-- 单个课程介绍 -->
  <section class="py-5">
    <div class="container py-4">
      <!-- Home listing -->
      <div class="row align-items-stretch gx-lg-0">
        <div class="col-lg-6 order-2 order-lg-1 bg-full-left">
          <div class="h-100 bg-light d-flex align-items-center">
            <div class="py-5 px-4">
              <p class="text-primary font-weight-bold small text-uppercase mb-2">
                课程介绍
              </p>
              <h3 class="h4">
                <a class="text-reset" href="post.html">课程名称</a>
              </h3>
              <div class="text-muted">
                <p>课程详细介绍1</p>
                <p>课程详细介绍2</p>
              </div>
              <ul class="list-inline small text-uppercase mb-0">
                <li class="list-inline-item align-middle">
                  <img class="rounded-circle shadow-sm" src="img/person-1.jpg" alt="" width="30" />
                </li>
                <li class="list-inline-item me-0 text-gray align-middle">
                  来自
                </li>
                <li class="list-inline-item align-middle me-0">
                  <a class="fw-bold reset-anchor" href="#!">老师名字</a>
                </li>
                <li class="list-inline-item text-gray align-middle me-0">
                  |
                </li>
                <li class="list-inline-item text-gray align-middle">
                  Jan, 2019
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-lg-6 order-1 order-lg-2">
          <a class="d-block h-100 bg-center bg-cover" href="post.html"
            style="background: url(img/898989.jpg)"></a>
        </div>
      </div>
    </div>
  </section>
  <!-- 所有课程-->
  <section class="pb-5">
    <div class="container pb-4">
      <header class="text-center mb-5">
        <h2>展示课程</h2>
        <p>基本课程展示</p>
      </header>
      <div class="row">
        <div class="col-lg-3 col-md-6 px-md-1 py-1">
          <a class="instagram-item d-block w-100 reset-anchor text-white" href="#!"><img class="img-fluid"
              src="img/898989.jpg" alt="" />
            <div class="instagram-item-overlay p-5">
              <h6>HTML5 拖放</h6>
            </div>
          </a>
        </div>
        <div class="col-lg-3 col-md-6 px-md-1 py-1">
          <a class="instagram-item d-block w-100 reset-anchor text-white" href="#!"><img class="img-fluid"
              src="img/898989.jpg" alt="" />
            <div class="instagram-item-overlay p-5">
              <h6>HTML5 地理定位</h6>
            </div>
          </a>
        </div>
        <div class="col-lg-3 col-md-6 px-md-1 py-1">
          <a class="instagram-item d-block w-100 reset-anchor text-white" href="#!"><img class="img-fluid"
              src="img/898989.jpg" alt="" />
            <div class="instagram-item-overlay p-5">
              <h6>HTML5 客户端存储</h6>
            </div>
          </a>
        </div>
        <div class="col-lg-3 col-md-6 px-md-1 py-1">
          <a class="instagram-item d-block w-100 reset-anchor text-white" href="#!"><img class="img-fluid"
              src="img/898989.jpg" alt="" />
            <div class="instagram-item-overlay p-5">
              <h6>HTML5 Web Workers</h6>
            </div>
          </a>
        </div>
        <div class="col-lg-3 col-md-6 px-md-1 py-1">
          <a class="instagram-item d-block w-100 reset-anchor text-white" href="#!"><img class="img-fluid"
              src="img/898989.jpg" alt="" />
            <div class="instagram-item-overlay p-5">
              <h6>HTML5 服务器发送事件</h6>
            </div>
          </a>
        </div>
        <div class="col-lg-3 col-md-6 px-md-1 py-1">
          <a class="instagram-item d-block w-100 reset-anchor text-white" href="#!"><img class="img-fluid"
              src="img/898989.jpg" alt="" />
            <div class="instagram-item-overlay p-5">
              <h6>HTML5 历史记录API</h6>
            </div>
          </a>
        </div>
        <div class="col-lg-3 col-md-6 px-md-1 py-1">
          <a class="instagram-item d-block w-100 reset-anchor text-white" href="#!"><img class="img-fluid"
              src="img/898989.jpg" alt="" />
            <div class="instagram-item-overlay p-5">
              <h6>HTML5 Canvas</h6>
            </div>
          </a>
        </div>
        <div class="col-lg-3 col-md-6 px-md-1 py-1">
          <a class="instagram-item d-block w-100 reset-anchor text-white" href="#!"><img class="img-fluid"
              src="img/898989.jpg" alt="" />
            <div class="instagram-item-overlay p-5">
              <h6>HTML5 内联 SVG</h6>
            </div>
          </a>
        </div>
      </div>
    </div>
  </section>
  <!-- 小组成员介绍 -->
  <section class="py-5 bg-light">
    <div class="container py-4">
      <header class="text-center mb-5">
        <h2>小组成员</h2>
        <p>小组成员介绍及其负责的部分</p>
      </header>
      <div class="row text-center">
        <div class="col-lg-13 col-md-6">
          <img class="mb-4" src="https://odin.adobe.com/content/dam/mcs/zh_cn/icons/raw/svg/ps_appicon.svg" alt=""
            height="150" />
          <h3 class="h5">范玉</h3>
          <p class="text-sm text-muted">导航栏菜单的设计与制作</p>
        </div>
        <div class="col-lg-13 col-md-6">
          <img class="mb-4" src="https://mcs.odin.adobe.com/content/dam/mcs/zh_cn/icons/raw/svg/pr_appicon.svg" alt=""
            height="150" />
          <h3 class="h5">来爽</h3>
          <p class="text-sm text-muted">轮播图的设计与制作</p>
        </div>
        <div class="col-lg-13 col-md-6">
          <img class="mb-4" src="https://odin.adobe.com/content/dam/mcs/zh_cn/icons/raw/svg/ae_appicon.svg" alt=""
            height="150" />
          <h3 class="h5">李名媛</h3>
          <p class="text-sm text-muted">课程卡片的设计与制作</p>
        </div>
        <div class="col-lg-13 col-md-6">
          <img class="mb-4" src="https://odin.adobe.com/content/dam/mcs/zh_cn/icons/raw/svg/ai_appicon.svg" alt=""
            height="150" />
          <h3 class="h5">周文聪</h3>
          <p class="text-sm text-muted">课程列表的设计与制作</p>
        </div>
        <div class="col-lg-13 col-md-6">
          <img class="mb-4" src="https://odin.adobe.com/content/dam/mcs/zh_cn/icons/raw/svg/au_appicon.svg" alt=""
            height="150" />
          <h3 class="h5">陆宗男</h3>
          <p class="text-sm text-muted">主页及响应式的设计与制作</p>
        </div>
      </div>
    </div>
  </section>
  <footer class="bg-dark py-4">
    <div class="container">
      <div class="row py-2 gy-2">
        <div class="col-lg-4 text-center text-lg-start">
          <p class="small text-muted text-uppercase mb-0">
          </p>
        </div>
        <div class="col-lg-4 text-center"></div>
        <div class="col-lg-4 text-center text-lg-end">
          <p class="small text-muted text-uppercase mb-0">
          </p>
        </div>
      </div>
    </div>
  </footer>
  <!-- JavaScript files-->
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="vendor/swiper/swiper-bundle.min.js"></script>
  <script src="js/front.js"></script>
  <script>
    // ------------------------------------------------------- //
    //   Inject SVG Sprite -
    //   see more here
    //   https://css-tricks.com/ajaxing-svg-sprite/
    // ------------------------------------------------------ //
    function injectSvgSprite(path) {
      var ajax = new XMLHttpRequest();
      ajax.open("GET", path, true);
      ajax.send();
      ajax.onload = function (e) {
        var div = document.createElement("div");
        div.className = "d-none";
        div.innerHTML = ajax.responseText;
        document.body.insertBefore(div, document.body.childNodes[0]);
      };
    }
    // this is set to BootstrapTemple website as you cannot
    // inject local SVG sprite (using only 'icons/orion-svg-sprite.svg' path)
    // while using file:// protocol
    // pls don't forget to change to your domain :)
    injectSvgSprite("icons/orion-svg-sprite.svg");
  </script>
  <!-- FontAwesome CSS - loading as last, so it doesn't block rendering-->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
    integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous" />
</body>

</html>